import { Device } from "@/api/interface/iot";
import { serviceLicenseInfo } from "@/api/modules/system/license";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import BasicDialog from "./components/basicDialog";
import { licenseStatusType } from "@/enums/dictEnum";
import "./index.scss";
import DialogBox from "@/components/DialogBox";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { PublicStore } from "@/stores/modules/public";
import { SYSTEM_ID } from "@/config/config";
import { ElMessage } from "element-plus";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const initParam = reactive<Device.ReqProduct>({ pageIndex: 1, pageSize: 20 });
		const proTable = ref<any>();
		const infoDialog = reactive<any>({
			title: proxy?.$t("status.dialog_title.info"),
			detail: "",
			visible: false
		});
		const dataCallback = (data: any) => {
			infoDialog.detail = data.machineId;
			return {
				datalist: data.records
			};
		};

		const getTableList = async (params: any) => {
			return serviceLicenseInfo(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			let btns = await useAuthButtons();
			btns = btns.filter((item: any) => item.component != "authorizationInfo");
			btnList.value = [{ menuName: proxy?.$t("status.btn.machineid"), path: "machineId" }, ...btns];
		});
		const detailDialog = reactive<any>({
			title: proxy?.$t("status.dialog_title.info"),
			detail: {},
			visible: false
		});
		const clickBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "detail":
					detailDialog.detail = row;
					detailDialog.visible = true;
					break;
				case "machineId":
					infoDialog.visible = true;
					break;
				case "uploadLicense":
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			// { type: "selection", fixed: "left", width: "auto" },
			{ prop: "appName", label: proxy?.$t("status.tablist_label.app") },
			{ prop: "appKey", label: proxy?.$t("status.tablist_label.appkey") },
			{ prop: "authorityItemName", label: proxy?.$t("status.tablist_label.itemname"), width: 120 },
			{ prop: "authKey", label: proxy?.$t("status.tablist_label.authkey"), width: 120 },
			{ prop: "authorityItemValue", label: proxy?.$t("status.tablist_label.itemvalue"), width: 160 },
			{ prop: "status", label: proxy?.$t("status.tablist_label.status"), width: 120 }
			// { prop: "updateTime", label: "授权时间", width: 260 },
			// { prop: "operation", label: proxy?.$t("status.tablist_label.operation") }
		];
		const publicStore = PublicStore();
		const uploadSuccess = (res: any) => {
			if (res.code == 200) {
				proTable.value.getTableList();
				ElMessage.success(res.message);
			} else {
				ElMessage.error(res.message);
			}
		};
		const uploadError = () => {
			ElMessage.error("上传失败");
		};
		return () => {
			return (
				<div class="serviceAuth-page">
					<DialogBox hideFooter v-model:visible={infoDialog.visible} width="600" title={infoDialog.title}>
						<span>{infoDialog.detail}</span>
						<span
							class="iconfont iconbx-copy-alt cursor-pointer ml-4"
							title={proxy?.$t("status.btn_title.copy")}
							v-copy={infoDialog.detail}
						/>
					</DialogBox>
					<BasicDialog
						width="400px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={{ ...detailDialog.detail.authorityItem, ...detailDialog.detail }}
						onSubmit={() => {
							detailDialog.visible = false;
							proTable.value.getTableList();
						}}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : ""}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						searchCol={4}
						dataCallback={dataCallback}
						pagination={false}
					>
						{{
							tableHeader: (scope: any) => {
								return (
									<div class="flex gap-3">
										{btnList.value?.map((item: any) => {
											if (item.component == "uploadLicense") {
												return (
													<el-upload
														show-file-list={false}
														on-success={uploadSuccess}
														on-error={uploadError}
														headers={{
															Authentication: publicStore.token,
															systemid: SYSTEM_ID,
															timestamp: Date.now()
														}}
														action="/api/app/license/upload"
													>
														<el-button type="primary">{item.menuName}</el-button>
													</el-upload>
												);
											} else {
												return (
													<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
														<i class={`iconfont ${item.icon}`}></i>
														{item.menuName}
													</el-button>
												);
											}
										})}
									</div>
								);
							},
							authorityItemName: (scope: any) => {
								return scope.row.authorityItem.name || "--";
							},
							authorityItemValue: (scope: any) => {
								return scope.row.authorityItem.value || "--";
							},
							status: (scope: any) => {
								let licenseStatus = licenseStatusType.filter((item: any) => item.value == scope.row.status);
								return <el-tag type={licenseStatus[0].type}>{licenseStatus[0].label}</el-tag>;
							},
							operation: (scope: any) => {
								return (
									<el-link
										type="primary"
										link
										onClick={() => {
											clickBtn("detail", scope.row);
										}}
										disabled={scope.row.status == "unauthorized" || scope.row.status == "unknown"}
									>
										{proxy?.$t("status.link.apply")}
									</el-link>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
